<template>
	<view class="page">
		<view class="tab-bar">
			<view class="tab" v-for="(item, index) in tabs" :key="index" :class="{ active: activeTab === index }"
				@click="switchTab(index, item.status)">
				{{ item.name }} ({{ item.count }})
			</view>
		</view>
		
		<scroll-view scroll-y class="list-scroll">
			<view v-if="tabData.length">
				<view class="list-item" v-for="(item, idx) in tabData" :key="idx"
					@click="selectCourse(item)">
					<view class="title">课程：{{ item.pay_body }}</view>
					<view class="time">{{ item.goods.course_camp.class_time_txt || '' }} {{ item.goods.course_camp.start_at || '' }}-{{ item.goods.course_camp.end_at || '' }}</view>
					<view class="address">{{ item.shop.shop_name }}</view>
				</view>
			</view>
			<view v-else class="empty">暂无数据</view>
		</scroll-view>
		
		
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				tabList: ['团课', '活动', '私教'],
				nindex: 1,
				timeList: [],
				day_date: '',
				page: 1,
				list: [],
				total_count: 0,
				tabs: [{
						name: '全部课程类型',
						count: 1,
						status: 0
					},
					{
						name: '待上课',
						count: 1,
						status: 1
					},
					{
						name: '已完成',
						count: 0,
						status: 3
					},
					{
						name: '已取消',
						count: 0,
						status: 4
					},
					{
						name: '已退费',
						count: 0,
						status: 4
					}
				],
				activeTab: 0,
				tabData: [],
				showUpload: false,
				detailData: {
					title: '',
					images: []
				},
				currentTab: 0, // 默认“全部课程”
				courseList: [],
				is_type:''
			}
		},
		methods: {
			getCourseSum() {
				this.$http({
					url: '/addons/xilufitness/coach/getCourseSum',
					method: 'GET',
					
				}).then(res => {
					
					this.tabs[0].count = res.data.allsum
					this.tabs[1].count = res.data.asum
					this.tabs[2].count = res.data.bsum
					this.tabs[3].count = res.data.csum
					this.tabs[4].count = res.data.dsum
				}).catch(err => {
					console.error('获取课程失败', err);
					this.tabData = [];
				});
			},
			getCourseList() {
				if(this.currentTab == 1) {
					this.$http({
						url: '/addons/xilufitness/coach/getWaitCourse',
						method: 'GET',
					}).then(res => {
						this.tabData = res.data.list
					
					}).catch(err => {
						console.error('获取课程失败', err);
						this.tabData = [];
					});
				} else {
					this.$http({
						url: '/addons/xilufitness/coach/getCourseList',
						method: 'GET',
						data: {
							status: this.currentTab
						}
					}).then(res => {
						this.tabData = res.data.list
						
					}).catch(err => {
						console.error('获取课程失败', err);
						this.tabData = [];
					});
				}
			
			},
			switchTab(index, status) {
				this.activeTab = index;
				if (this.currentTab !== status) {
					this.currentTab = status;
					this.getCourseList();
				}
				if (index !== 1) {
					this.showUpload = false;
				}
			},
			selectCourse(item) {
				if(item.is_type) {
					this.$api.navigate(`../scheduling_detail/scheduling_detail?id=${item.id}&is_type=${item.is_type}`)
				} else {
					this.$api.navigate(`../scheduling_detail/scheduling_detail?id=${item.id}&goods_id=${item.goods.id}`)
				}
				
				if (this.activeTab === 1) {
					this.showUpload = true;
					this.detailData.title = item.title;
					this.detailData.images = [];
				}
			},
			chooseImage() {
				uni.chooseImage({
					count: 5 - this.detailData.images.length,
					success: res => {
						this.detailData.images = this.detailData.images.concat(res.tempFilePaths);
					}
				});
			},
			removeImg(idx) {
				this.detailData.images.splice(idx, 1);
			},
			confirmClass() {
				uni.showToast({
					title: '上课完成',
					icon: 'success'
				});
				this.showUpload = false;
			},





			chooseNav(e) {
				this.nindex = e;
				this.clearData();
			},
			//选择日期
			chooseDate(day_date) {
				this.day_date = day_date;
				this.clearData();
			},
			//清楚数据
			clearData() {
				this.list = [];
				this.page = 1;
				this.total_count = 0;
				this.getLists();
			},
			//获取数据
			getLists() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/coach/getScheduling',
					data: {
						page: _this.page,
						course_type: _this.nindex,
						day_date: _this.day_date
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						if (_this.page > 1) {
							_this.list.push(...res.data.list);
						} else {
							_this.list = res.data.list;
						}
						_this.total_count = res.data.total_count;
						_this.timeList = res.data.timeList || [];
						_this.day_date = _this.day_date || res.data.day_date;
					}
				}).catch(error => {

				});
			},
			//详情
			detail(id, is_type) {
				this.$api.navigate('../scheduling_info/scheduling_info?id=' + id + '&is_type=' + is_type);
			},
			//活动详情
			campDetail(id, work_camp_id) {
				this.$api.navigate('../scheduling_info/scheduling_info?id=' + id + '&is_type=3' +
					'&work_camp_id=' +
					work_camp_id);
			},
			//打开地图
			openLocation(lat, lng) {
				this.$api.openLocation(lat, lng);
			}
		},
		onLoad() {
			this.getCourseSum()
			this.getLists();
			this.getCourseList(this.currentTab)
		},
		onReachBottom() {
			let list = this.list;
			let total_count = this.total_count;
			if (list.length > total_count) {
				this.page = this.page + 1;
				this.getLists();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		padding: 30rpx;
		background-color: #E8EEFE;
		// min-height: 100vh;
		box-sizing: border-box;
		color: #fff;
		font-size: 28rpx;
	}

	/* 横向滚动 tab 栏 */
	.tab-bar {
		display: flex;
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 10rpx;

		&::-webkit-scrollbar {
			display: none;
		}

		.tab {
			display: inline-block;
			padding: 15rpx 30rpx;
			margin-right: 20rpx;
			border-radius: 50rpx;
			font-size: 28rpx;
			color: #999;
			background-color: #fff;
			transition: all 0.2s;
			user-select: none;

			&:active {
				transform: scale(0.95);
			}

			&.active {
				background-color: #FFCF00;
				color: #181818;
				font-weight: 600;
			}
		}
	}

	.list-scroll {
		max-height: calc(100vh - 50rpx);
		overflow-y: scroll;
	}

	.list-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 20rpx;
		transition: 0.2s;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);

		.title {
			font-size: 30rpx;
			font-weight: 500;
			color: #333;
			margin-bottom: 12rpx;
		}

		.time,
		.address {
			font-size: 24rpx;
			color: #999;
			margin-bottom: 6rpx;
		}
	}

	.empty {
		text-align: center;
		padding: 200rpx 0;
		color: #666;
		font-size: 28rpx;
	}

	.detail-popup {
		margin-top: 30rpx;
		padding: 30rpx;
		background-color: #232323;
		border-radius: 16rpx;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.4);

		.detail-title {
			font-size: 30rpx;
			color: #fff;
			margin-bottom: 20rpx;
		}

		.upload-box {
			display: flex;
			flex-wrap: wrap;
			gap: 20rpx;
			margin-bottom: 30rpx;

			.img-wrap {
				position: relative;
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
				overflow: hidden;
				background-color: #2c2c2c;

				.img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					border-radius: 12rpx;
				}

				.del-btn {
					position: absolute;
					top: 0;
					right: 0;
					width: 40rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					background: rgba(0, 0, 0, 0.5);
					color: #fff;
					border-bottom-left-radius: 12rpx;
					font-size: 30rpx;
				}

				&.add {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 50rpx;
					color: #666;
					background-color: #2c2c2c;
				}
			}
		}

		.confirm-btn {
			width: 100%;
			padding: 20rpx 0;
			text-align: center;
			border-radius: 12rpx;
			background-color: #FFCF00;
			color: #181818;
			font-size: 32rpx;
			transition: 0.2s;

			&:active {
				opacity: 0.8;
				transform: scale(0.96);
			}
		}
	}


	.xilu {
		&_tab_nav {
			height: 108rpx;
			line-height: 108rpx;
			padding-left: 32rpx;

			&_link {
				margin-right: 40rpx;
				font-size: 34rpx;
				font-weight: 400;
				color: #FFFFFF;
				display: inline-block;
				vertical-align: top;
			}

			&_link.active {
				font-weight: 500;
				color: #FFCF00;
			}
		}

		&_date_nav {
			width: 700rpx;
			height: 145rpx;
			background: #404243;
			border-radius: 20rpx;

			&_item {
				width: 58rpx;
				height: 110rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 42rpx;
				line-height: 40rpx;
				text-align: center;
				padding-top: 13rpx;
			}

			&_item:first-child {
				margin-left: 16rpx;
			}

			&_item.active {
				background: #FFCF00;
				border-radius: 29rpx;
				color: #101010;
				line-height: 40rpx;
			}
		}

		&_part1_item {
			padding: 30rpx 30rpx 25rpx;
			background: #292B2C;
			border-radius: 20rpx;
			width: 100%;
			margin-top: 30rpx;
		}
	}

	.w352 {
		width: 352rpx;
	}
</style>